<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
    <style>
        #box {
            width:200px;
            height:200px;
            background:yellow;
        }
    </style>
</head>
<body>

    <div id="box">

    </div>


    <script>
        //需求2 从数组中返回偶数的元素
        const arr = [11,12,31,30,40];
        // let result = arr.filter(function (items) {
        //     if (items % 2 == 0) {
        //         return true;
        //     } else {
        //         return false;
        //     }
        // });
        // console.log(result);
        let result = arr.filter(items => items % 2 == 0);
        console.log(result);
        
        

        //验证一下箭头指向
        // var obj = {
        //     sub_obj: {
        //         name: 'xxx',
        //         fn:function () {

        //             // let jiantou = function () {
        //             //     console.log(this, '<---');
        //             // }

        //             function jiantou() {
        //                 console.log(this, '<---');
        //             }

        //             // let jiantou =()=> {
        //             //     console.log(this, '<---');
        //             // }
        //             jiantou();
        //         }
        //     }
        // }

        // obj.sub_obj.fn();


        
        //ES6 箭头函数的实践与应用场景
        // let box = document.querySelector('#box');

        // box.addEventListener('click', function () {
        //     //这里的
        //     // console.log(1);
        //     setTimeout(()=>{
        //         this.style.background = 'pink';
        //     },3000);
        // })
        


        //当函数体只有一条语句，花括号是可以省略的，return也省略
        // let add = n => n + n;
        // console.log(add(9));
        
        //当形参只有一个的时候，可以不需要小括号
        // let add = n => {
        //     return n + n;
        // }

        // console.log(add(10));

        


        //普通函数是可以用 arguments
        // let fn = function () {
        //     console.log(arguments);
        // }

        //箭头函数是报错的 不能用arguments
        // let fn = () => {
        //     console.log(arguments);
        // } 

        // fn(1,2,3,4);

        // let Person = function (name, age) {
        //     this.name = name;
        //     this.age = age;    
        // }

        // let Person = (name, age) => {
        //     this.name = name;
        //     this.age = age;
        // }

        // const p = new Person();
        // console.log(p);


        //this == window
        // window.name = 'xiaomi';
        // function getName() {
        //     console.log(this.name);
        // }
        
        // let getName2 = () => {
        //     console.log(this.name);
        // }

        // getName();
        // getName2();

        // let obj = {
        //     name: '1902A'
        // }

        // getName.call(obj);
        // getName2.call(obj);
        
        
    </script>
</body>
</html>